<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-header">轮播组图</div>
    <div class="layui-card-body" style="padding: 15px;">
      <form class="layui-form" action="" lay-filter="component-form-group" id="from">
        <div class="layui-form-item">
          <label class="layui-form-label">标题</label>
          <div class="layui-input-block">
            <input type="text" name="title" lay-verify="required" autocomplete="off" placeholder="请输入" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">链接</label>
          <div class="layui-input-block">
            <input type="text" name="href" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <script id="menusList" type="text/html">
          <div class="layui-form-item">
            <label class="layui-form-label">分组</label>
              <div class="layui-input-block">
                <select name="carousel_cate_id">
                    <option value="" selected>请选择</option>
                  {{# for(var i = 0;i< d.data.length;i++){ }}
                    <option value="{{ d.data[i].id }}">{{ d.data[i].name }}</option>
                  {{# } }}
                </select> 
              </div>
          </div>
        </script>
        <div id="add_menu"></div>
        <div class="layui-form-item">
          <label class="layui-form-label">新窗口打开</label>
          <div class="layui-input-block">
            <input type="radio" name="is_target" value="1" title="是">
            <input type="radio" name="is_target" value="0" title="否" checked>
          </div>
        </div>
        <div class="layui-upload" style="margin-left: 110px;">
          <button type="button" class="layui-btn" id="test1">上传图片</button>
          <div class="layui-upload-list">
            <img class="layui-upload-img" id="demo1">
            <p id="demoText"></p>
          </div>
        </div> 
        
        <div class="layui-form-item">
          <div class="layui-input-block">
            <div class="">
              <button class="layui-btn" lay-submit="" lay-filter="component-form-demo1">立即提交</button>
              <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
  layui.use(['form', 'layer','tplay','apiconfig','laytpl','upload'], function(){
    var $ = layui.$
    ,layer = layui.layer
    ,form = layui.form
    ,laytpl = layui.laytpl
    ,upload = layui.upload
    ,tplay = layui.tplay
    ,config = layui.apiconfig;

    var cates;
    tplay.ajax({url:config.domain+"/admin/index/CarouselCate",async:false,success:function(res){cates = res;}});
    var getTpl = $('#menusList').html()
    ,view = document.getElementById('add_menu');
    laytpl(getTpl).render(cates, function(html){
      view.innerHTML = html;
    });

    form.render(null, 'component-form-group');

    //普通图片上传
    var uploadInst = upload.render({
      elem: '#test1'
      ,url: '/admin/index/uploads'
      ,done: function(res){
        //如果上传失败
        if(res.code < 0){
          return layer.msg('上传失败');
        }
        //上传成功
        $('#demo1').attr('src', res.data); //图片链接（base64）
        $('#demo1').after('<input type="hidden" value='+res.data+' name="img">');
      }
      ,error: function(){
        //演示失败状态，并实现重传
        var demoText = $('#demoText');
        demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-mini demo-reload">重试</a>');
        demoText.find('.demo-reload').on('click', function(){
          uploadInst.upload();
        });
      }
    });
    
    /* 监听提交 */
    form.on('submit(component-form-demo1)', function(data){
      tplay.ajax({
        url:config.domain+"/admin/portal/addCarousel",
        type:"post",
        data:$('#from').serialize(),
        success:function(res){
          layer.msg(res.msg);
        }
      })
      return false;
    });
  });
</script>